<template>
	<view class="contact">
		<view class="list-box" id="box">
			<view class="box"  v-if="list.length > 0">
				<view class="uni-list">
					<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
						<view class="uni-list-cell-navigate">
							{{item.remark}} {{item.mobile}}
							<text class="icon iconfont icon-dianhua text-success mui-pull-right" @tap="callPhone(item.mobile)"></text>
						</view>
					</view>
				</view>
			</view>	

			<view class="no-data" v-else>你还没有添加联系人</view>
		</view>

		

		<view @tap="showMask = true" class="fixed-bottom-btn">
			添加联系人
		</view>

		<view class="mask" v-if="showMask" @tap="showMask = false">
			<view class="mask-container" @tap.stop="showMask = true">
				<view class="title">添加联系人</view>
				<view class="info">
					<view class="input-box">
						<input type="text" v-model="username" placeholder="联系人姓名" />
					</view>
					<view class="input-box">
						<input type="number" v-model="mobile" placeholder="手机号" />
					</view>
				</view>
				<view class="add-btn" @tap="addContact">添加</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				showMask: false,
				username: '',
				mobile: '',
				list: [],
				page: 1,
				nextPage: true
			};
		},
		onLoad() {
			this.getContactList();
		},
		onReachBottom() {
			this.getContactList();
		},
		methods: {
			//获取联系人列表
			getContactList: function(){
				if(this.nextPage == false) {
					return ;
				}
				
				var url =  'contact/index';
				var that = this;
				Request.send({
					url: url,
					data: {page: that.page},
					sCallback: function(res) {
						that.list = res.data;
						that.page ++;
						if(res.data.length <20 ) {
							that.nextPage = false;
						}
					}
				})
			},	

			//拨打电话
			callPhone: function(mobile){
				var preg = /^1\d{10}$/;
				if(!preg.test(mobile)) {
					Request.alert('手机号码格式不正确');return;
				}
				var url =  'call/dial';
				var that = this;
				Request.send({
					url: url,
					data: {callee: mobile},
					sCallback: function(res) {
						Request.alert(res.msg);
					}
				})

			},

			//添加联系人
			addContact: function(){
				var mobile = this.mobile;
				var remark = this.username;

				if(!remark) {
					Request.alert('请输入联系人姓名');return false;
				}

				if(!mobile) {
					Request.alert('请输入手机号');return false;
				}

				var preg = /^1\d{10}$/;
				if(!preg.test(mobile)) {
					Request.alert('手机号码格式不正确'); return false;
				}
				var url =  'contact/addEdit';
				var that = this;
				Request.send({
					url: url,
					data: {
						mobile: mobile,
						remark: remark
					},
					sCallback: function(res) {
						that.showMask = false;
						that.list = [];
						that.page = 1;
						that.nextPage = true;
						that.getContactList();
					}
				})

			}
		}
	}
</script>

<style>
		page{
			background: #fff;
			/* color: #B2B3B4; */
			font-size: 28upx;
			
		}
		
		.uni-list{
			background: none;
		}
		
		.contact{
			margin-bottom: 90upx;
		}

		/*添加联系人*/
		.mask{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			background: rgba(0, 0, 0, 0.7);
		}


		.mask .mask-container{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
		}

		.mask .mask-container .title{
			line-height: 80upx;
			padding: 0 40upx;
			border-bottom: 1upx solid #eee;
			color: #272822;
			text-align: center;
			
		}
		
		.mask .mask-container .input-box{
			border-bottom: 1upx solid #eee;
		}
		
		.mask .mask-container input{
			height: 80upx;
		}

		.mask .mask-container .info{
			padding: 0 40upx 40upx;
		}

		.mask .mask-container .add-btn{
			color:rgba(255,255,255,1);
			background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
			line-height: 80upx;
			width: 100%;
			text-align: center;
		}

		.mui-table-view{
			background: none;
		}

		.mui-table-view .mui-table-view-cell:after{
			left: 0;
		}
</style>
